<template>
  <div class="full-height">

    <div>
      <select-sport-type></select-sport-type>
    </div>
    <div class="row">
      <!-- 赛事编辑页面 -->
      <div
        class="panda-table border-right border-top fixed fixed-left"
        style="width:300px;  box-shadow: 1px 0 0 0 rgba(0,0,0,0.50); top:61px;left:61px"
        :style="all_component_style"
      >
        <!--左边组件-->
        <mini-match-list
          @toedit="to_edit_and_show_right"
          :editing_obj="show_match_edit_obj"
          :minilist_item_can_click="minilist_item_can_click"
          :refresh_minilist="refresh_minilist"
          :editing_obj_id="editing_obj_id ? editing_obj_id:this.$route.params.id"
        ></mini-match-list>
      </div>
      <div
        class="panda-table border-right border-top fixed fixed-left"
        style="top:61px;left:361px"
        :style="compute_middle_component_style()"
      >
        <!--中间组件-->
        <match-edit
        :clicked_minilist_item_id="clicked_minilist_item_id"
          :editing_obj="show_match_edit_obj"
          @minilist_item_can_click_change="minilist_item_can_click_change"
          @minilist_need_refresh="minilist_need_refresh"
          @close="match_edit_component_close"
        ></match-edit>
      </div>
      <div
        class="fixed fixed-right bg-panda-base-dark panda-table border-left text-panda-text-light"
        v-if="showrightdetail==1"
        style="width:350px;  box-shadow: -1px 0 0 0 rgba(0,0,0,0.50);   top: 61px;  width: 350px; z-index:5"
        :style="all_component_style"
      >
        <right-info
          :right_detail_obj="show_right_detail_obj"
          @toedit="to_show_match_edit"
      
        ></right-info>
      </div>
    </div>
  </div>
</template>
<style lang="stylus" scoped></style>
<script>
import { mapGetters, mapActions } from "vuex";
import { api_match } from "src/api/index.js";
import mixins from "src/mixins/index.js";
import matchmixin from "src/mixins/pages/match/match.js";
import { match_resource_tabledata } from "src/mock/match/index.js";
import { tablecolumns_config } from "src/pages/match/resource/config/config.js";
import selectSportType from "src/components/query/selectSportType.vue";
import { dom } from "quasar";
const { height, width } = dom;
export default {
  mixins: [...mixins, matchmixin],
  components: {
    rightInfo: () => import("src/pages/match/resource/component/rightInfo.vue"),
    matchEdit: () => import("src/pages/match/resource/component/matchEdit.vue"),

    miniMatchList: () =>
      import("src/pages/match/resource/component/miniMatchList.vue"),
    selectSportType
  },
  data() {
    return {
      editing_obj_id: 0,
      refresh_minilist: 0,
      show_right_detail_obj: {},
      show_match_edit_obj: {},
      scroll_area_height: "",
      tablecolumns: tablecolumns_config,
      showrightdetail_before_edit: "",
      all_component_style: {},
      minilist_item_can_click:1,
      clicked_minilist_item_id:''
    };
  },
  created() {
    this.set_breadcrumbsPart4(["编辑管理"]);
  },
  methods: {
    init_tabledata() {
      this.editing_obj_id = this.$route.query.editing_obj_id; // 接受  选中数据id
      this.get_new_editing_obj(this.editing_obj_id);
    },
    get_new_editing_obj(id) {
      let params = {
         sportId:this.sportId,
        id: id
      };

      api_match
        .post_tournament_queryTour(params)
        .then(res => {
          let arr = this.$lodash.get(res, "data.data.records") || [];
          if (arr[0]) {
            this.clicked_minilist_item_id=arr[0]['id']
            this.edit_table_item(arr[0]);
          } else {
            this.edit_table_item({});
          }
        });
    },

    compute_middle_component_style() {
      let wh = this.window_size_info.height;
      let wc = wh - 36 - 30 - 30;
      this.all_component_style = {
        height: wc + "px",
        maxHeight: wc + "px"
      };
    },

    minilist_need_refresh(val, id) {
      this.refresh_minilist = val;
      console.log(" 改变的 数据 的 技术ID");
      console.log(id);
      if (id) {
        this.editing_obj_id = id;
        this.get_new_editing_obj(id);
      }
    },


    edit_table_item(item) {
      console.log(item);
      this.table_item_click(item);
      this.set_breadcrumbsPart4(["编辑管理"]);
    },
    to_show_match_edit() {
      this.set_breadcrumbsPart4(["编辑管理"]);
    },
    to_edit_and_show_right(item) {
      // 这个绝对是点击的 
      this.clicked_minilist_item_id=item.id
      this.table_item_click(item);
    },
    match_edit_component_close() {

      this.$router.push({
        name: "match_resource"
      });
    },

    minilist_item_can_click_change(val){
      this.minilist_item_can_click= val
    },
    table_item_click(item) {
      console.log(" table_item_click(item)");
      console.log(item);
      this.show_right_detail_obj = this.$lodash.cloneDeep(item);
      this.show_match_edit_obj = this.$lodash.cloneDeep(item);
      this.show_right_detail = true;
    }
  }
};
</script>
